<script setup>
import {
  NTimeline,
  NTimelineItem,
  NDivider,
  NImageGroup,
  NImage,
} from "naive-ui";
import timeData from "./timeData";
</script>

<template>
  <div class="about">
    <a href="#"
      ><svg
        class="icon"
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
        width="48"
        height="48"
      >
        <path
          d="M798.31 692.838c-37.683 0-73.318-14.54-99.942-40.96-26.829-26.624-41.78-62.259-41.984-100.352-.205-38.092 14.336-73.932 40.96-100.761l76.595-77.21c5.53-5.53 13.927-7.373 21.3-4.3 7.167 2.867 11.673 9.625 11.878 17.407l5.53 75.367c.409 5.734-3.892 10.445-9.421 11.059-5.735.41-10.65-3.891-11.06-9.42l-5.324-73.729-74.752 75.367c-22.733 22.937-35.226 53.657-35.021 86.22.205 32.564 12.902 63.079 36.045 85.812 22.937 22.528 53.248 35.02 85.606 35.02h.614c32.564-.204 63.079-12.902 85.812-36.044l76.39-77.21-74.752.41c-5.53 0-10.24-4.506-10.24-10.24s4.506-10.24 10.24-10.24l75.366-.41c8.192 0 15.565 4.915 18.637 12.288 3.277 7.578 1.639 16.18-4.096 21.914l-76.8 77.619c-26.624 26.829-62.259 41.779-100.352 41.984-.614.41-1.024.41-1.229.41zm-381.747 39.117H106.086l-.819-9.216c-.205-2.457-5.12-58.573 15.77-123.29 19.251-60.21 65.126-138.854 174.285-171.622C403.66 395.264 491.93 425.37 546.816 456.5c59.392 33.587 92.774 74.343 94.208 75.981 3.482 4.3 2.867 10.854-1.434 14.336-4.3 3.482-10.854 2.867-14.336-1.434-.614-.614-33.177-39.936-89.088-71.475-74.752-41.984-153.804-50.995-234.905-26.624-80.691 24.371-134.759 77.62-160.563 158.31-14.746 45.876-15.565 87.655-15.156 105.882h276.89c1.024-5.734 1.229-14.336-4.3-22.118-7.988-10.855-29.697-22.938-88.474-18.432-5.735.41-10.65-3.687-11.06-9.421-.41-5.734 3.687-10.65 9.421-11.06 55.091-4.3 90.931 4.711 106.906 27.034 15.565 21.914 5.12 47.104 4.71 48.128l-3.072 6.35z"
        />
        <path
          d="M399.155 686.285c-5.734 0-10.24-4.506-10.24-10.24s4.506-10.24 10.24-10.24c26.01 0 52.429-27.239 59.392-60.826 2.663-30.72-7.782-53.657-30.925-67.993-18.022-11.264-36.864-12.903-37.068-13.108-5.735-.614-9.83-5.53-9.216-11.059s5.53-9.83 11.059-9.216c1.024 0 23.961 2.253 46.08 15.975 20.89 12.902 45.056 38.707 40.55 87.859l-.205 1.024c-8.806 43.622-43.827 77.824-79.667 77.824zm69.632-79.872zm346.727 125.542H520.806c-13.312 0-26.214-5.53-35.225-15.155-9.216-9.83-13.722-22.528-12.903-36.045 1.844-25.6 16.59-58.368 77.005-70.451a10.391 10.391 0 0 1 12.083 7.987 10.391 10.391 0 0 1-7.987 12.083c-38.297 7.578-58.777 24.986-60.62 51.61-.41 7.578 2.047 14.95 7.372 20.685s12.493 8.806 20.275 8.806h294.708c5.734 0 10.24 4.506 10.24 10.24s-4.506 10.24-10.24 10.24zm-64.717-131.072c-10.24 0-19.661-3.481-26.829-10.65-10.65-10.649-13.517-27.238-7.782-43.417 1.843-5.325 7.782-8.192 13.107-6.144 5.325 1.843 8.192 7.782 6.144 13.107-3.072 8.807-2.048 17.203 2.867 22.119 7.987 7.987 23.962 5.324 34.816-5.53 4.096-4.096 10.445-4.096 14.54 0s4.097 10.445 0 14.54c-10.649 10.446-24.166 15.975-36.863 15.975z"
        />
        <path
          d="M795.648 645.53c-10.445 0-20.07-3.687-27.034-10.65-15.974-16.18-13.516-44.646 5.53-63.898 4.096-4.096 10.445-4.096 14.54 0s4.097 10.445 0 14.541c-10.854 10.855-13.516 26.829-5.529 34.816 4.915 4.915 13.312 5.94 22.119 2.867 5.324-1.843 11.264.82 13.107 6.144 1.843 5.325-.82 11.264-6.144 13.108-5.735 2.252-11.264 3.072-16.589 3.072zM89.702 681.165c-3.89 0-7.577-2.253-9.42-5.94l-8.192-18.022a435.479 435.479 0 0 1-25.805-74.137C29.49 516.3 40.14 447.078 75.98 387.89c36.25-59.597 93.593-101.376 161.382-117.555 5.53-1.229 11.06 2.048 12.288 7.578 1.229 5.53-2.048 11.059-7.577 12.288-62.464 14.95-115.303 53.452-148.685 108.339-32.973 54.272-42.803 118.17-27.443 179.405 5.939 23.961 14.336 47.718 24.576 70.656l8.192 18.022c2.252 5.12 0 11.264-5.12 13.517-1.024.819-2.458 1.024-3.892 1.024z"
        />
      </svg>
      <span>【看电影学英语】100部纯英文电影+音频+台词剧本</span>
    </a>
    <div class="time-line">
      <n-timeline size="large" item-placement="right">
        <n-timeline-item
          v-for="item in timeData"
          :title="item.title"
          :time="item.time"
        >
          <template #icon>
            <svg
              class="icon"
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              width="256"
              height="256"
            >
              <path
                d="M817.8 472.9c-5-23.4-3.7-59.7-15.4-89.6-3.5 5.4-8.4 9.6-14.9 11.8-4.9 1.7-9.3 2.2-13.2 1.9 24.4 20.3 12 40.1 24.6 77.2 17 49.9-61.6 92.9-137.3 36.5s62.7-139.2 71.8-135.5c8.3 3.3 15.3 6.4 21.3 9.5-7.7-11.9-8.4-28-5.2-28.9 6.5-1.8 12.4-6.8 17.7-13.1-20.9-10.8-51.6-14.5-97.5-5.9 0 0 .2-31.7-23.9-54-10.3 8.9-20.2 19.1-26.9 29.4 26.2 32.6 7.3 103.3-87.4 141.1C413.8 499.9 496 350.1 496 350.1c-2.5-4.5 32.6-56.7 82.4-55.8 1-3.9 2.5-8.1 4.7-12.9 3.5-7.6 8.1-14.1 13.4-19.5-22-2.4-50.7.4-88 11.8 0 0-11.4-21.9-32.6-42.4-9.3 7.9-18.5 16.8-25.5 26 7.5 8.1 12 19.4 11 34.9-4.5 67.3-48.8 96.5-76.5 81.1-27.7-15.5-86.2-44.9-18.2-135.4 0 0 20-2.6 41.6.6.7-2 1.6-4.1 2.6-6.3 5.7-12.4 14.3-21.7 24.2-28.4-34.1-13.9-79-11.3-132.6 39.1-127.7 120.2-103 353.1-103 353.1 30.8 121.7 213.3 302.4 416 173.3 169.9-108.2 213.1-245.6 202.3-296.4zM587.6 696.6c-35 61-133.9 70.1-220.9 20.2S237.6 577 272.6 515.9s133.9-70.1 220.9-20.2 129.1 139.9 94.1 200.9z"
                fill="#EDEDED"
              />
              <path
                d="M408.2 238.6c-21.6-3.2-41.6-.6-41.6-.6-68 90.5-9.5 119.9 18.2 135.4s72-13.7 76.5-81.1c1-15.5-3.5-26.8-11-34.9-3.8 5-7 10.1-9.1 15.2-3 7.6-49.8 11.4-33-34zm170.2 55.7c-49.9-.9-84.9 51.2-82.4 55.8 0 0-82.2 149.8 35.4 102.9 94.8-37.8 113.6-108.4 87.4-141.1-2.1 3.3-3.9 6.6-5.3 9.9-2.9 7.2-45.2 10.9-35.1-27.5zm176.3 90.3c-6-3.1-13-6.2-21.3-9.5-9.2-3.6-147.6 79.1-71.8 135.5s154.3 13.4 137.3-36.5c-12.6-37.1-.2-57-24.6-77.2-9-.6-15.4-5.8-19.6-12.3zM493.5 495.8c-87-49.9-185.9-40.9-220.9 20.2s7.1 151 94.1 200.8 185.9 40.9 220.9-20.2c35-61-7.1-150.9-94.1-200.8zm-182.6 9.4c-34.6 119.9 58.7 174.5 84.8 187.2 2.1 1 4.3 2 6.6 3 0 0-2.4-1-6.6-3C238.9 619.8 313 498 310.9 505.2z"
                fill="#FCD0D7"
              />
              <path
                d="M395.7 692.4c4.1 2 6.6 3 6.6 3-2.3-1-4.4-2-6.6-3zm-84.8-187.2c2.1-7.2-72 114.6 84.8 187.2-26.1-12.6-119.4-67.3-84.8-187.2z"
                fill="#FFF"
              />
              <path
                d="M410.9 232.3c-1 2.2-1.9 4.3-2.6 6.3-16.8 45.4 29.9 41.6 33.1 34.1 2.1-5.1 5.3-10.2 9.1-15.2 7-9.2 16.2-18.1 25.5-26 19.8-16.8 40.1-28.9 40.1-28.9-4.6-14.4-49.4-19.8-80.9 1.4-10.1 6.5-18.7 15.8-24.3 28.3zm167.5 62c-10.1 38.4 32.2 34.6 35.2 27.5 1.4-3.3 3.2-6.6 5.3-9.9 6.7-10.3 16.6-20.4 26.9-29.4 20.6-17.9 42.5-31 42.5-31-5.2-16.2-60.8-20.9-91.8 10.4-5.3 5.4-9.9 11.8-13.4 19.5-2.1 4.8-3.7 9.1-4.7 12.9zm171 61.4c-3.2.9-2.5 17.1 5.2 28.9 4.2 6.5 10.6 11.7 19.6 12.4 3.9.3 8.3-.2 13.2-1.9 6.5-2.2 11.4-6.4 14.9-11.8 16.3-25.5 2.5-78.8-10.9-87.3 0 0-9.5 28.7-24.3 46.6-5.2 6.3-11.2 11.3-17.7 13.1z"
                fill="#F7EBD0"
              />
            </svg>
          </template>
          <template #default>
            <p class="line-content">{{ item.content }}</p>
            <br />
            <n-image-group show-toolbar-tooltip>
              <n-image width="200" :src="item.src" />
            </n-image-group>
          </template>
        </n-timeline-item>
      </n-timeline>
      <n-divider
        dashed
        title-placement="center"
        style="
          color: brown;
          font-size: 25px;
          font-family: 'Courier New', Courier, monospace;
        "
      >
        · 解说 · 混剪 · 海报 · 音乐 ·
      </n-divider>
      <n-timeline size="large">
        <n-timeline-item
          v-for="item in timeData"
          :title="item.title"
          :time="item.time"
        >
          <template #icon>
            <svg
              class="icon"
              viewBox="0 0 1024 1024"
              xmlns="http://www.w3.org/2000/svg"
              width="256"
              height="256"
            >
              <path
                d="M817.8 472.9c-5-23.4-3.7-59.7-15.4-89.6-3.5 5.4-8.4 9.6-14.9 11.8-4.9 1.7-9.3 2.2-13.2 1.9 24.4 20.3 12 40.1 24.6 77.2 17 49.9-61.6 92.9-137.3 36.5s62.7-139.2 71.8-135.5c8.3 3.3 15.3 6.4 21.3 9.5-7.7-11.9-8.4-28-5.2-28.9 6.5-1.8 12.4-6.8 17.7-13.1-20.9-10.8-51.6-14.5-97.5-5.9 0 0 .2-31.7-23.9-54-10.3 8.9-20.2 19.1-26.9 29.4 26.2 32.6 7.3 103.3-87.4 141.1C413.8 499.9 496 350.1 496 350.1c-2.5-4.5 32.6-56.7 82.4-55.8 1-3.9 2.5-8.1 4.7-12.9 3.5-7.6 8.1-14.1 13.4-19.5-22-2.4-50.7.4-88 11.8 0 0-11.4-21.9-32.6-42.4-9.3 7.9-18.5 16.8-25.5 26 7.5 8.1 12 19.4 11 34.9-4.5 67.3-48.8 96.5-76.5 81.1-27.7-15.5-86.2-44.9-18.2-135.4 0 0 20-2.6 41.6.6.7-2 1.6-4.1 2.6-6.3 5.7-12.4 14.3-21.7 24.2-28.4-34.1-13.9-79-11.3-132.6 39.1-127.7 120.2-103 353.1-103 353.1 30.8 121.7 213.3 302.4 416 173.3 169.9-108.2 213.1-245.6 202.3-296.4zM587.6 696.6c-35 61-133.9 70.1-220.9 20.2S237.6 577 272.6 515.9s133.9-70.1 220.9-20.2 129.1 139.9 94.1 200.9z"
                fill="#EDEDED"
              />
              <path
                d="M408.2 238.6c-21.6-3.2-41.6-.6-41.6-.6-68 90.5-9.5 119.9 18.2 135.4s72-13.7 76.5-81.1c1-15.5-3.5-26.8-11-34.9-3.8 5-7 10.1-9.1 15.2-3 7.6-49.8 11.4-33-34zm170.2 55.7c-49.9-.9-84.9 51.2-82.4 55.8 0 0-82.2 149.8 35.4 102.9 94.8-37.8 113.6-108.4 87.4-141.1-2.1 3.3-3.9 6.6-5.3 9.9-2.9 7.2-45.2 10.9-35.1-27.5zm176.3 90.3c-6-3.1-13-6.2-21.3-9.5-9.2-3.6-147.6 79.1-71.8 135.5s154.3 13.4 137.3-36.5c-12.6-37.1-.2-57-24.6-77.2-9-.6-15.4-5.8-19.6-12.3zM493.5 495.8c-87-49.9-185.9-40.9-220.9 20.2s7.1 151 94.1 200.8 185.9 40.9 220.9-20.2c35-61-7.1-150.9-94.1-200.8zm-182.6 9.4c-34.6 119.9 58.7 174.5 84.8 187.2 2.1 1 4.3 2 6.6 3 0 0-2.4-1-6.6-3C238.9 619.8 313 498 310.9 505.2z"
                fill="#FCD0D7"
              />
              <path
                d="M395.7 692.4c4.1 2 6.6 3 6.6 3-2.3-1-4.4-2-6.6-3zm-84.8-187.2c2.1-7.2-72 114.6 84.8 187.2-26.1-12.6-119.4-67.3-84.8-187.2z"
                fill="#FFF"
              />
              <path
                d="M410.9 232.3c-1 2.2-1.9 4.3-2.6 6.3-16.8 45.4 29.9 41.6 33.1 34.1 2.1-5.1 5.3-10.2 9.1-15.2 7-9.2 16.2-18.1 25.5-26 19.8-16.8 40.1-28.9 40.1-28.9-4.6-14.4-49.4-19.8-80.9 1.4-10.1 6.5-18.7 15.8-24.3 28.3zm167.5 62c-10.1 38.4 32.2 34.6 35.2 27.5 1.4-3.3 3.2-6.6 5.3-9.9 6.7-10.3 16.6-20.4 26.9-29.4 20.6-17.9 42.5-31 42.5-31-5.2-16.2-60.8-20.9-91.8 10.4-5.3 5.4-9.9 11.8-13.4 19.5-2.1 4.8-3.7 9.1-4.7 12.9zm171 61.4c-3.2.9-2.5 17.1 5.2 28.9 4.2 6.5 10.6 11.7 19.6 12.4 3.9.3 8.3-.2 13.2-1.9 6.5-2.2 11.4-6.4 14.9-11.8 16.3-25.5 2.5-78.8-10.9-87.3 0 0-9.5 28.7-24.3 46.6-5.2 6.3-11.2 11.3-17.7 13.1z"
                fill="#F7EBD0"
              />
            </svg>
          </template>
          <template #default>
            <p class="line-content">{{ item.content }}</p>
            <br />
            <n-image-group show-toolbar-tooltip>
              <n-image width="200" :src="item.src" />
            </n-image-group>
          </template>
        </n-timeline-item>
      </n-timeline>
    </div>
  </div>
</template>

<style scoped lang="scss">
.about {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 620px;
  a {
    border-bottom: 1px dotted #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 20px;
  }

  > a span {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500px;
  }
  .line-content {
    font-family: "Courier New", Courier, monospace;
    color: #ff8800;
  }
}
</style>
